<template>
  <el-row class="user-info-form emergency-plan-form" type="flex" justify="center" v-loading="loading">
    <el-col>
      <el-form label-position="top" :model="editForm" :rules="editFormRules" ref="editForm" @submit.native.prevent>
        <input type="hidden" v-model="editForm.id" />
        <!-- <el-form-item label="业主单位：" prop="orgId">
                  <el-select filterable v-model="editForm.orgId">
                    <el-option
                      v-for="item in orgOptions"
                      :key="item.organizationId"
                      :label="item.shortName"
                      :value="item.organizationId">
                    </el-option>
                  </el-select>
        </el-form-item>-->
        <el-form-item label="预案名称：" prop="name">
          <el-input v-model="editForm.name" auto-complete="off" placeholder="请输入预案名称"></el-input>
        </el-form-item>
        <el-form-item label="火灾等级：" prop="level">
          <el-select filterable v-model="editForm.level" placeholder="火灾等级">
            <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="火灾类型：" prop="type">
          <el-select filterable v-model="editForm.type" placeholder="火灾类型">
            <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应急人员：">
          <el-col
            v-for="(attrObj, attrindex) in memberList.length>0?memberList:memberList.push({groupName:'',dutyName:'',tel:''})"
            :key="'user_'+attrindex"
          >
            <el-col :span="7">
              <el-select filterable v-model="attrObj.groupName" placeholder="人员分组">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.id+attrindex"
                  :label="item.dictValue"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-autocomplete
                autocomplete="off"
                class="inline-input"
                v-model="attrObj.dutyName"
                :fetch-suggestions="querySearch"
                placeholder="请输入姓名"
                @select="handleSelect(attrObj)"
              ></el-autocomplete>
            </el-col>
            <el-col :span="7">
              <el-input v-model="attrObj.tel" placeholder="请输入电话"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button v-if="attrindex===0" @click.prevent="addDomain(memberList)">新增</el-button>
            </el-col>
            <el-col :span="2">
              <el-button v-if="attrindex!==0" @click.prevent="removeDomain(memberList,attrindex)">删除</el-button>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="预案流程：">
          <quill-editor
            ref="myQuillEditor"
            v-model="editForm.flowContent"
            :options="util.intEditorOptions()"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
          <!-- 文件上传input 将它隐藏-->
          <el-upload
            :action="QINIUUPLOADURL"
            :before-upload="beforeAvatarUploadEditor"
            :data="qiniuDataEditor"
            :on-success="handleAvatarSuccessEditor"
            ref="uploadEditor"
            style="display:none"
          >
            <el-button size="small" type="primary" id="imgInput">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <!-- 现场指挥小组分工、信息传导小组分工、灭火战斗小组分工、引导疏散小组分工、安全警戒小组分工、后勤救护小组分工、其他小组分工 -->
        <el-form-item label="各小组分工：">
          <el-tabs class="group-workers-tabs" v-model="activeName" type="card">
            <el-tab-pane label="现场指挥小组" name="first">
              <div>
                <quill-editor
                  ref="myQuillEditor_leaderTaskContent"
                  v-model="editForm.leaderTaskContent"
                  :options="util.intEditorOptions()"
                  @blur="onEditorBlur_taskContent($event, 'leaderTaskContent')"
                  @focus="onEditorFocus_taskContent($event, 'leaderTaskContent')"
                  @change="onEditorChange_taskContent($event, 'leaderTaskContent')"
                ></quill-editor>
                <!-- 文件上传input 将它隐藏-->
                <el-upload
                  :action="QINIUUPLOADURL"
                  :data="qiniuDataEditor_leaderTaskContent"
                  :before-upload="function(file){return beforeAvatarUploadEditor_taskContent(file, 'leaderTaskContent')}"
                  :on-success="function(res, file, fileList) {return handleAvatarSuccessEditor_taskContent(res, file, fileList, 'leaderTaskContent')}"
                  ref="uploadEditor_leaderTaskContent"
                  style="display:none"
                >
                  <el-button size="small" type="primary" id="imgInput_leaderTaskContent">点击上传</el-button>
                </el-upload>
              </div>
            </el-tab-pane>
            <el-tab-pane label="信息传导小组" name="second">
              <div>
                <quill-editor
                  ref="myQuillEditor_conductionTaskContent"
                  v-model="editForm.conductionTaskContent"
                  :options="util.intEditorOptions()"
                  @blur="onEditorBlur_taskContent($event, 'conductionTaskContent')"
                  @focus="onEditorFocus_taskContent($event, 'conductionTaskContent')"
                  @change="onEditorChange_taskContent($event, 'conductionTaskContent')"
                ></quill-editor>
                <!-- 文件上传input 将它隐藏-->
                <el-upload
                  :action="QINIUUPLOADURL"
                  :data="qiniuDataEditor_conductionTaskContent"
                  :before-upload="function(file){return beforeAvatarUploadEditor_taskContent(file, 'conductionTaskContent')}"
                  :on-success="function(res, file, fileList) {return handleAvatarSuccessEditor_taskContent(res, file, fileList, 'conductionTaskContent')}"
                  ref="uploadEditor_conductionTaskContent"
                  style="display:none"
                >
                  <el-button size="small" type="primary" id="imgInput_conductionTaskContent">点击上传</el-button>
                </el-upload>
              </div>
            </el-tab-pane>
            <el-tab-pane label="灭火战斗小组" name="third">
              <div>
                <quill-editor
                  ref="myQuillEditor_battleTaskContent"
                  v-model="editForm.battleTaskContent"
                  :options="util.intEditorOptions()"
                  @blur="onEditorBlur_taskContent($event, 'battleTaskContent')"
                  @focus="onEditorFocus_taskContent($event, 'battleTaskContent')"
                  @change="onEditorChange_taskContent($event, 'battleTaskContent')"
                ></quill-editor>
                <!-- 文件上传input 将它隐藏-->
                <el-upload
                  :action="QINIUUPLOADURL"
                  :data="qiniuDataEditor_battleTaskContent"
                  :before-upload="function(file){return beforeAvatarUploadEditor_taskContent(file, 'battleTaskContent')}"
                  :on-success="function(res, file, fileList) {return handleAvatarSuccessEditor_taskContent(res, file, fileList, 'battleTaskContent')}"
                  ref="uploadEditor_battleTaskContent"
                  style="display:none"
                >
                  <el-button size="small" type="primary" id="imgInput_battleTaskContent">点击上传</el-button>
                </el-upload>
              </div>
            </el-tab-pane>
            <el-tab-pane label="引导疏散小组" name="fourth">
              <div>
                <quill-editor
                  ref="myQuillEditor_evacuateTaskContent"
                  v-model="editForm.evacuateTaskContent"
                  :options="util.intEditorOptions()"
                  @blur="onEditorBlur_taskContent($event, 'evacuateTaskContent')"
                  @focus="onEditorFocus_taskContent($event, 'evacuateTaskContent')"
                  @change="onEditorChange_taskContent($event, 'evacuateTaskContent')"
                ></quill-editor>
                <!-- 文件上传input 将它隐藏-->
                <el-upload
                  :action="QINIUUPLOADURL"
                  :data="qiniuDataEditor_evacuateTaskContent"
                  :before-upload="function(file){return beforeAvatarUploadEditor_taskContent(file, 'evacuateTaskContent')}"
                  :on-success="function(res, file, fileList) {return handleAvatarSuccessEditor_taskContent(res, file, fileList, 'evacuateTaskContent')}"
                  ref="uploadEditor_evacuateTaskContent"
                  style="display:none"
                >
                  <el-button size="small" type="primary" id="imgInput_evacuateTaskContent">点击上传</el-button>
                </el-upload>
              </div>
            </el-tab-pane>
            <el-tab-pane label="安全警戒小组" name="fifth">
              <div>
                <quill-editor
                  ref="myQuillEditor_safetyalertTaskContent"
                  v-model="editForm.safetyalertTaskContent"
                  :options="util.intEditorOptions()"
                  @blur="onEditorBlur_taskContent($event, 'safetyalertTaskContent')"
                  @focus="onEditorFocus_taskContent($event, 'safetyalertTaskContent')"
                  @change="onEditorChange_taskContent($event, 'safetyalertTaskContent')"
                ></quill-editor>
                <!-- 文件上传input 将它隐藏-->
                <el-upload
                  :action="QINIUUPLOADURL"
                  :data="qiniuDataEditor_safetyalertTaskContent"
                  :before-upload="function(file){return beforeAvatarUploadEditor_taskContent(file, 'safetyalertTaskContent')}"
                  :on-success="function(res, file, fileList) {return handleAvatarSuccessEditor_taskContent(res, file, fileList, 'safetyalertTaskContent')}"
                  ref="uploadEditor_safetyalertTaskContent"
                  style="display:none"
                >
                  <el-button size="small" type="primary" id="imgInput_safetyalertTaskContent">点击上传</el-button>
                </el-upload>
              </div>
            </el-tab-pane>
            <el-tab-pane label="后勤救护小组" name="sixth">
              <div>
                <quill-editor
                  ref="myQuillEditor_logisticsTaskContent"
                  v-model="editForm.logisticsTaskContent"
                  :options="util.intEditorOptions()"
                  @blur="onEditorBlur_taskContent($event, 'logisticsTaskContent')"
                  @focus="onEditorFocus_taskContent($event, 'logisticsTaskContent')"
                  @change="onEditorChange_taskContent($event, 'logisticsTaskContent')"
                ></quill-editor>
                <!-- 文件上传input 将它隐藏-->
                <el-upload
                  :action="QINIUUPLOADURL"
                  :data="qiniuDataEditor_logisticsTaskContent"
                  :before-upload="function(file){return beforeAvatarUploadEditor_taskContent(file, 'logisticsTaskContent')}"
                  :on-success="function(res, file, fileList) {return handleAvatarSuccessEditor_taskContent(res, file, fileList, 'logisticsTaskContent')}"
                  ref="uploadEditor_logisticsTaskContent"
                  style="display:none"
                >
                  <el-button size="small" type="primary" id="imgInput_logisticsTaskContent">点击上传</el-button>
                </el-upload>
              </div>
            </el-tab-pane>
            <el-tab-pane label="其他小组" name="seventh">
              <div>
                <quill-editor
                  ref="myQuillEditor_taskContent"
                  v-model="editForm.taskContent"
                  :options="util.intEditorOptions()"
                  @blur="onEditorBlur_taskContent($event, 'taskContent')"
                  @focus="onEditorFocus_taskContent($event, 'taskContent')"
                  @change="onEditorChange_taskContent($event, 'taskContent')"
                ></quill-editor>
                <!-- 文件上传input 将它隐藏-->
                <el-upload
                  :action="QINIUUPLOADURL"
                  :data="qiniuDataEditor_taskContent"
                  :before-upload="function(file){return beforeAvatarUploadEditor_taskContent(file, 'taskContent')}"
                  :on-success="function(res, file, fileList) {return handleAvatarSuccessEditor_taskContent(res, file, fileList, 'taskContent')}"
                  ref="uploadEditor_taskContent"
                  style="display:none"
                >
                  <el-button size="small" type="primary" id="imgInput_taskContent">点击上传</el-button>
                </el-upload>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>

        <el-form-item label-width="0" class="verifyidentity-button">
          <el-button round @click="closeDialog()">取消</el-button>
          <el-button type="primary" round @click="saveEdit('editForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import util from '@/utils/util'
import { getOrgList } from '@/api/org'
import { getDictByCode } from '@/api/dic'
import { qnToken, getUsers } from '@/api/api'
import { saveEmergencyPlanInfo, selectEmergencyPlanDetail } from '@/api/plan'

export default {
  name: 'EmergencyPlanForm',
  props: {
    editInfo: {
      type: Object,
      required: false,
    },
    closeDialog: {
      type: Function,
      required: true,
    },
  },
  // 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件
  mounted() {
    let that = this
    let taskContentList = [
      'taskContent',
      'leaderTaskContent',
      'conductionTaskContent',
      'battleTaskContent',
      'evacuateTaskContent',
      'safetyalertTaskContent',
      'logisticsTaskContent',
    ]
    // 为图片ICON绑定事件  getModule 为编辑器的内部属性
    this.$refs.myQuillEditor.quill
      .getModule('toolbar')
      .addHandler('image', that.imgHandler)
    this.$refs.myQuillEditor.quill
      .getModule('toolbar')
      .addHandler('video', that.videoHandler) // 为视频ICON绑定事件

    taskContentList.forEach((item) => {
      this.$refs['myQuillEditor_' + item].quill
        .getModule('toolbar')
        .addHandler('image', function (state) {
          return that.imgHandler_taskContent(state, item)
        })
      this.$refs['myQuillEditor_' + item].quill
        .getModule('toolbar')
        .addHandler('video', function (state) {
          return that.videoHandler_taskContent(state, item)
        }) // 为视频ICON绑定事件
    })
  },
  data() {
    return {
      activeName: 'first',
      qiniuDataEditor: {
        //富文本编辑器相关  预案流程
        token: '',
        key: '',
        fileList: [],
      },
      qiniuDataEditor_default: {
        token: '',
      },
      qiniuDataEditor_leaderTaskContent: {
        //富文本编辑器相关 领导组分工
        key: '',
        fileList: [],
      },
      qiniuDataEditor_conductionTaskContent: {
        //富文本编辑器相关 传导组分工
        key: '',
        fileList: [],
      },
      qiniuDataEditor_battleTaskContent: {
        //富文本编辑器相关 战斗组分工
        key: '',
        fileList: [],
      },
      qiniuDataEditor_evacuateTaskContent: {
        //富文本编辑器相关 疏散组分工
        key: '',
        fileList: [],
      },
      qiniuDataEditor_safetyalertTaskContent: {
        //富文本编辑器相关 安全警戒组分工
        key: '',
        fileList: [],
      },
      qiniuDataEditor_logisticsTaskContent: {
        //富文本编辑器相关 后勤组分工
        key: '',
        fileList: [],
      },
      qiniuDataEditor_taskContent: {
        //富文本编辑器相关 其他小组分工
        key: '',
        fileList: [],
      },
      defaultImg: this.GLOBAL.defaultImg,
      util: util,
      loading: false,
      orgOptions: [],
      levelOptions: [],
      typeOptions: [],
      roleOptions: [], //分组
      userOptions: [], //人员
      memberList: [],
      editForm: {
        id: 0,
        orgId: '' /*this.$store.state.userinfo.org.id*/,
        name: '',
        level: '',
        type: '',
        flowContent: '',
        taskContent: '',
        leaderTaskContent: '',
        conductionTaskContent: '',
        battleTaskContent: '',
        evacuateTaskContent: '',
        safetyalertTaskContent: '',
        logisticsTaskContent: '',
        membersStr: '',
      },
      editFormRules: {
        name: [{ required: true, message: '请输入公告名称', trigger: 'blur' }],
        /* orgId: [
              { required: true, message: '请选择业主单位', trigger: 'change' }
            ], */
        level: [
          { required: true, message: '请选择火灾等级', trigger: 'change' },
        ],
        type: [
          { required: true, message: '请选择火灾类型', trigger: 'change' },
        ],
        createTime: [
          {
            type: 'string',
            required: true,
            message: '请选择时间',
            trigger: 'change',
          },
        ],
        groupName: [
          { required: true, message: '请选择分组', trigger: 'change' },
        ],
        dutyName: [
          { required: true, message: '请输入应急人员', trigger: 'blur' },
        ],
        tel: [{ required: true, message: '请输入号码', trigger: 'blur' }],
      },
    }
  },
  created() {
    let infoObj = this.editInfo
    this.editForm.orgId = infoObj.orgId
    if (infoObj.id) {
      //编辑
      this.editForm.id = infoObj.id
      selectEmergencyPlanDetail({ planId: infoObj.id }).then((data) => {
        this.editForm.orgId = data.data.orgId
        this.editForm.name = data.data.name
        this.editForm.level = data.data.level
        this.editForm.type = data.data.type
        this.editForm.flowContent = data.data.flowContent
        this.editForm.taskContent = data.data.taskContent
        this.editForm.leaderTaskContent = data.data.leaderTaskContent
        this.editForm.conductionTaskContent = data.data.conductionTaskContent
        this.editForm.battleTaskContent = data.data.battleTaskContent
        this.editForm.evacuateTaskContent = data.data.evacuateTaskContent
        this.editForm.safetyalertTaskContent = data.data.safetyalertTaskContent
        this.editForm.logisticsTaskContent = data.data.logisticsTaskContent
        this.editForm.membersStr = data.data.members
        this.memberList = data.data.members
      })
    }
    //绑定下拉框
    getOrgList({ queryType: 0 }).then((data) => {
      this.orgOptions.push.apply(this.orgOptions, data.data)
    })
    let that = this
    //火灾等级
    util.ilinkArrHandle.delDicArr_keyVal(87, function (arr) {
      that.levelOptions.push.apply(that.levelOptions, arr)
    })
    //火灾类型
    util.ilinkArrHandle.delDicArr_keyVal(88, function (arr) {
      that.typeOptions.push.apply(that.typeOptions, arr)
    })
    //分组
    getDictByCode({ code: 67 }).then((data) => {
      this.roleOptions.push.apply(this.roleOptions, data.data.dictValueObj)
    })
    //人员信息
    getUsers({ orgId: this.editForm.orgId, queryType: 0 }).then((data) => {
      this.userOptions.push.apply(this.userOptions, data.data)
    })
    this.getToken() //获取token
  },
  methods: {
    handleSelect(attrObj) {
      $.each(this.userOptions, (index, obj) => {
        if (attrObj.dutyName === obj.name) {
          attrObj.tel = obj.phone
          return false
        }
      })
      return attrObj
    },
    querySearch(queryString, cb) {
      var restaurants = this.userOptions
      $.each(restaurants, (index, obj) => {
        obj.value = obj.name
      })
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    addDomain(attrArr) {
      return attrArr.push({ groupName: '', dutyName: '', tel: '' })
    },
    removeDomain(attrArr, attrindex) {
      return attrArr.splice(attrindex, 1)
    },
    getToken() {
      //上传之前获取 token
      qnToken({}).then((result) => {
        this.qiniuDataEditor.token = result.data //富文本编辑器相关
        this.qiniuDataEditor_default.token = result.data //富文本编辑器相关
        $.extend(
          this.qiniuDataEditor_leaderTaskContent,
          this.qiniuDataEditor_default
        )
        $.extend(
          this.qiniuDataEditor_conductionTaskContent,
          this.qiniuDataEditor_default
        )
        $.extend(
          this.qiniuDataEditor_battleTaskContent,
          this.qiniuDataEditor_default
        )
        $.extend(
          this.qiniuDataEditor_evacuateTaskContent,
          this.qiniuDataEditor_default
        )
        $.extend(
          this.qiniuDataEditor_safetyalertTaskContent,
          this.qiniuDataEditor_default
        )
        $.extend(
          this.qiniuDataEditor_logisticsTaskContent,
          this.qiniuDataEditor_default
        )
        $.extend(this.qiniuDataEditor_taskContent, this.qiniuDataEditor_default)
      })
    },
    //--------------------BEGIN  富文本编辑器相关------------------------------//
    beforeAvatarUploadEditor: function (file) {
      //重命名和校验
      this.loading = true
      const suffix = file.name.split('.')
      const ext = suffix.splice(suffix.length - 1, 1)[0]
      var fielLocal = file.name.split('.')
      var fielType = '.' + fielLocal[fielLocal.length - 1]
      var fielLocalName = fielLocal[0]
      this.qiniuDataEditor.key = 'ilink_' + new Date().getTime() + fielType
    },
    handleAvatarSuccessEditor: function (res, file, fileList) {
      //上传成功
      this.loading = false
      let vm = this
      let url = QINIUUPLOADURL.indexOf('uploadFile')>-1? res.data:QINIUPATH+res.key
      if (url != null && url.length > 0) {
        // 将文件上传后的URL地址插入到编辑器文本中
        let value = url
        vm.qiniuDataEditor.fileList = vm.$refs.myQuillEditor.quill.getSelection()
        vm.$refs.myQuillEditor.quill.insertEmbed(
          vm.qiniuDataEditor.fileList !== null
            ? vm.qiniuDataEditor.fileList.index
            : 0,
          vm.uploadType,
          value
        ) // 调用编辑器的 insertEmbed 方法，插入URL
      } else {
        this.$message.error('上传失败')
      }
      this.$refs['uploadEditor'].clearFiles() // 插入成功后清除input的内容
    },
    // 点击图片ICON触发事件
    imgHandler(state) {
      this.addRange = this.$refs.myQuillEditor.quill.getSelection()
      if (state) {
        let fileInput = document.getElementById('imgInput')
        fileInput.click() // 加一个触发事件
      }
      this.uploadType = 'image'
    },
    // 点击视频ICON触发事件
    videoHandler(state) {
      this.addRange = this.$refs.myQuillEditor.quill.getSelection()
      if (state) {
        let fileInput = document.getElementById('imgInput')
        fileInput.click() // 加一个触发事件
      }
      this.uploadType = 'video'
    },
    // 编辑器光标离开 将编辑器内容发射给父组件
    onEditorBlur(editor) {
      this.$emit('getValue', this.editForm.flowContent)
    },
    // 编辑器获得光标
    onEditorFocus(editor) {
      editor.enable(true) // 实现达到上限字符可删除
    },
    // 编辑器文本发生变化
    onEditorChange({ editor, html, text }) {
      let textLength = text.length
      if (textLength > 10000) {
        this.$message.error('最多输入10000个字符')
        editor.enable(false)
      }
      this.$emit('getValue', this.editForm.flowContent)
    },
    // 清除编辑器内容
    callMethod() {
      this.editForm.flowContent = ''
    },
    //--------------------END  富文本编辑器相关------------------------------//
    //--------------------BEGIN  富文本编辑器相关-小组分工 ------------------------------//
    beforeAvatarUploadEditor_taskContent: function (file, type) {
      //重命名和校验
      this.loading = true
      const suffix = file.name.split('.')
      const ext = suffix.splice(suffix.length - 1, 1)[0]
      var fielLocal = file.name.split('.')
      var fielType = '.' + fielLocal[fielLocal.length - 1]
      var fielLocalName = fielLocal[0]
      this['qiniuDataEditor_' + type].key =
        'ilink_' + new Date().getTime() + fielType
    },
    handleAvatarSuccessEditor_taskContent: function (
      res,
      file,
      fileList,
      type
    ) {
      //上传成功
      this.loading = false
      let vm = this
      let url = QINIUUPLOADURL.indexOf('uploadFile')>-1? res.data:QINIUPATH+res.key
      if (url != null && url.length > 0) {
        // 将文件上传后的URL地址插入到编辑器文本中
        let value = url
        vm['qiniuDataEditor_' + type].fileList = vm.$refs[
          'myQuillEditor_' + type
        ].quill.getSelection()
        vm.$refs['myQuillEditor_' + type].quill.insertEmbed(
          vm['qiniuDataEditor_' + type].fileList !== null
            ? vm['qiniuDataEditor_' + type].fileList.index
            : 0,
          vm.uploadType,
          value
        ) // 调用编辑器的 insertEmbed 方法，插入URL
      } else {
        this.$message.error('上传失败')
      }
      this.$refs['uploadEditor_' + type].clearFiles() // 插入成功后清除input的内容
    },
    // 点击图片ICON触发事件
    imgHandler_taskContent(state, type) {
      this.addRange = this.$refs['myQuillEditor_' + type].quill.getSelection()
      if (state) {
        let fileInput = document.getElementById('imgInput_' + type)
        fileInput.click() // 加一个触发事件
      }
      this.uploadType = 'image'
    },
    // 点击视频ICON触发事件
    videoHandler_taskContent(state, type) {
      this.addRange = this.$refs['myQuillEditor_' + type].quill.getSelection()
      if (state) {
        let fileInput = document.getElementById('imgInput_' + type)
        fileInput.click() // 加一个触发事件
      }
      this.uploadType = 'video'
    },
    // 编辑器光标离开 将编辑器内容发射给父组件
    onEditorBlur_taskContent(editor, type) {
      this.$emit('getValue', this.editForm[type])
    },
    // 编辑器获得光标
    onEditorFocus_taskContent(editor, type) {
      editor.enable(true) // 实现达到上限字符可删除
    },
    // 编辑器文本发生变化
    onEditorChange_taskContent({ editor, html, text }, type) {
      let textLength = text.length
      if (textLength > 10000) {
        this.$message.error('最多输入10000个字符')
        editor.enable(false)
      }
      this.$emit('getValue', this.editForm[type])
    },
    // 清除编辑器内容
    callMethod(type) {
      this.editForm.taskContent = ''
    },
    //--------------------END  富文本编辑器相关-小组分工 ------------------------------//
    saveEdit(formName) {
      // 阻止事件冒泡
      event.stopPropagation()
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let parames = that.editForm

          parames.membersStr = JSON.stringify(that.memberList)
          saveEmergencyPlanInfo(parames).then((res) => {
            that.$message({
              message: '保存成功！',
              type: 'success',
            })
            that.closeDialog(true)
          })
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss">
.emergency-plan-form {
  .group-workers-tabs {
    .el-tab-pane {
      padding: 0;
    }
  }
}
</style>
